<!DOCTYPE html>
<html>
<head>
<title>Retro Page</title>
<link rel="stylesheet" href="https://unpkg.com/98.css" />
<style>
body {
background-color: black;
color: white;
padding: 2rem;
font-family: sans-serif;
}
.window {
width: 300px;
margin: auto;
}
.dialog-overlay {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
}
.visible {
display: block;
}
.btn {
margin-top: 1rem;
}
#homeScreen {
display: none;
margin-top: 3rem;
}
</style>
</head>
<body>
<!-- Trigger Button -->
<button class="btn" onclick="showDialog()">Click me</button>
<!-- Popup Dialog -->
<div class="dialog-overlay" id="popup">
<div class="window">
<div class="title-bar">
<div class="title-bar-text">Warning</div>
<div class="title-bar-controls">
<button aria-label="Close" onclick="closeDialog()"></button>
</div>
</div>
<div class="window-body">
<p>Are you sure you wanna do this?</p>
<div class="field-row" style="justify-content: flex-end;">
<button onclick="goHome()">Yes</button>
<button onclick="goHome()">Exactly?</button>
</div>
</div>
</div>
</div>
<!-- Home Screen -->
<div id="homeScreen">
<div class="window" style="width: 400px;">
<div class="title-bar">
<div class="title-bar-text">Home</div>
</div>
<div class="window-body">
<p>Welcome to your retro home screen!</p>
<ul>
<li><a href="https://instagram.com" target="_blank">Instagram</a></li>
<li><a href="https://tiktok.com" target="_blank">TikTok</a></li>
<li><a href="https://youtube.com" target="_blank">YouTube</a></li>
</ul>
</div>
</div>
</div>
<script>
function showDialog() {
document.getElementById('popup').classList.add('visible');
}
function closeDialog() {
document.getElementById('popup').classList.remove('visible');
}
function goHome() {
closeDialog();
document.getElementById('homeScreen').style.display = 'block';
}
</script>
</body>
</html>